<template>
  <div class="UpdateHospital">
    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">医院信息管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path:'/hospital' }">医院管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path:'/updateHospital' }">编辑医院</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 修改医院信息列表 -->
    <div class="hospitalMsg">
      <h3 class="center">基本信息</h3>
      <div class="addMain">
        <el-form :model="hospital" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
          <el-row :gutter="10">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
              <div>
                <el-form-item label="医院名称" prop="hosName" :rules="[{ required: true, message: '医院名称不能为空'}]">
                  <el-input placeholder="请输入医院名称" v-model="hospital.hosName"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医院别称" prop="aliss" :rules="[{ required: true, message: '医院别名不能为空'}]">
                  <el-input placeholder="请输入医院别称" v-model="hospital.aliss"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医院电话" prop="telephone" :rules="[{ required: true, message: '医院电话不能为空'}]">
                  <el-input placeholder="请输入医院联系电话" v-model="hospital.telephone"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医院联系人" prop="contact" :rules="[{ required: true, message: '医院联系人不能为空'}]">
                  <el-input placeholder="请输入医院联系人" v-model="hospital.contact" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医院地址" prop="address" :rules="[{ required: true, message: '医院地址不能为空'}]">
                  <el-input placeholder="请输入医院地址" v-model="hospital.address"
                            autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
              <div>
                <el-form-item label="医院等级" prop="estate" :rules="[{ required: true, message: '医院等级不能为空'}]">
                  <el-select v-model="hospital.estate" placeholder="请选择医院等级" style="width:100%">
                    <el-option v-for="item in hospitalLevelList" :key="item.id" :label="item.level"
                               :value="item.level"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="医院性质" prop="nature" :rules="[{ required: true, message: '医院性质不能为空'}]">
                  <el-input placeholder="请输入医院性质" v-model="hospital.nature"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="服务热线" prop="helpline" :rules="[{ required: true, message: '服务热线不能为空'}]">
                  <el-input placeholder="请输入服务热线" v-model="hospital.helpline"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="hosPhone" :rules="[{ required: true, message: '联系人电话不能为空'}]">
                  <el-input placeholder="请输入联系人电话" v-model="hospital.hosPhone" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
              <div class="grid-content bg-purple-light"></div>
            </el-col>
          </el-row>
          <!-- 返回 -->
          <el-form-item class="center">
            <div>
              <el-button @click="($router.push('/hospital'))">返回</el-button>
              <el-button type="primary" @click="updateHospitalBtn">更新</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: "UpdateHospital",
  data() {
    return {
      hospital: this.$route.params.hospital[0],
    }
  },
  computed: {
    ...mapGetters(['hospitalLevelList']),
  },
  mounted() {
  },
  methods: {
    updateHospitalBtn() {
      this.$service.hospitalService.updateHospitalMessage(this.hospital).then(res => {
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          });
          this.$router.push('/hospital');
        } else {
          this.$message.error('添加失败');
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.center {
  display: flex;
  justify-content: center;
  margin: 40px;
}
</style>
